Appearance
ezxrARSession-3dof 算法插件
3DoF 算法(也叫 imu 算法)是利用手机设备的姿态同步并更新渲染相机的位姿,实现手机与虚拟内容的交互的能力。
插件申请和示例代码
为了快速对插件进行基础的了解和认识,请直接下载示例 Demo,使用微信小程序开发工具打开,修改 AppId 为已申请插件授权的 AppID,替换绑定了上述 AppID 的内容资源,然后在真机扫码预览效果。
插件权限申请
- 首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件,通过 AppID** [wx33b4f056bf74d649]** 查找插件并添加。
- 或者在微信小程序开发者工具中,导入示例 Demo 以后,等开发工具提示需要插件权限时,点击『申请』
内容资源替换
- 第一步,在洞见 AR-World 小程序能力平台创建 3DoF 跟踪 - 沉浸环绕内容
- 第二步,参考接入示例接入
示例 Demo
更新日志
20230726 v1.1.1
优化 3DoF 效果
20230302 v1.1.0
支持 unity 和 threejs Web 双编辑器
支持洞见 AR-World 小程序能力平台配置
支持拍照
使用说明
快速使用插件请直接使用代码示例 Demo,后续内容开发建议以代码示例 Demo 为基础开发。
此说明更适用于帮助理解。
3.1 添加插件
javascript
"plugins": {
"ezxrARSession": {
"version": "1.1.1",
"provider": "wx33b4f056bf74d649"
}
},
3.2 引用插件
此插件提供的页面入口地址为:plugin://ezxrARSession/ARSession
javascript
//在page或component的js文件中添加
const plugin = requirePlugin('ezxrARSession')
//在page或component的json文件中添加
"usingComponents": {
"ezxr-arsession": "plugin://ezxrARSession/ARSession"
}
//在page或component的wxml文件中添加
<ezxr-arsession id="ezxr-arsession"></ezxr-arsession>
this.ezxr = new plugin.AREzxr(); // 同下文中this.arEzxr
3.2 提供方法
插件对外提供 ARSession 组件和 AREzxr 方法库。
【ARSession 组件】
方法名称 | 方法说明 | 入参与返回 |
---|---|---|
fnStart | 算法启动 | trackerType:跟踪类型,填1; locationType:定位类型,填0; trackerOption:跟踪参数,有 renderer(渲染引擎renderer) |
【AREzxr 方法库】
方法名称 | 方法说明 | 入参与返回 |
---|---|---|
checkARSupport | 查询是否支持 AR | 返回:{ arSupport, // 当前设备是否支持AR体验 camFov //需要传递给渲染引擎 } |
fnWxRequestRes | 获取内容平台配置 | 入参如下: cid:内容平台 cid(同内容id) key:内容平台环境,development(测试)/production(线上) 返回如下: contentId:内容ID contentName:内容名 contentPackageUrl:内容包资源链接 contentType:内容类别,3-沉浸式环绕 editorType: 1-web 编辑器 2-unity 编辑器 |
PoseUpdate | 获取 GL 坐标 pose | 算法更新。 |
fnGetGlobalGLPose | 获取 ezxrGL 坐标 pose | 获取算法坐标。 返回:{ ezxrPose,pose,timestamp,spaceUncertainty,timeUncertainty} |
fnTakephoto | 拍照 | 返回:临时存储路径 |
3.3 接入示例
3.3.1 ARSession 组件及方法使用示例
组件引用:
javascript
//在page或component的json文件中添加
"usingComponents": {
"ezxr-arsession": "plugin://ezxrARSession/ARSession"
}
//在page或component的wxml文件中添加
<ezxr-arsession id="ezxr-arsession"></ezxr-arsession>
//在page或component的js文件中添加
this.arSessionCpt = this.selectComponent('#ezxr-arsession');
组件(this.arSessionCpt)提供方法使用:
javascript
//在page或component的js文件中添加本模块示例
_// 获取渲染引擎的renderer,此处仅为示例,可从代码示例demo中查看this.arContentCpt的引用_
// 需要确保在渲染引擎初始化成功之后 todo
_const wcengine = this.arContentCpt.fnGetWCEngineRenderer(); _
// 算法启动, 可渲染背景;
const onStarted = () => {
console.log("Tracker onStarted");
};
// 算法初始化完成, 可获得camera pose;
// 初始化后同步内容和算法fov, 同时获取pose开始显示内容;
const onRecogSuccess = () => {
console.log("Tracker onCompleted");
// 获取算法Fov, 设置内容渲染fov
const camFov = this.ezxr.fnGetCameraFov();
this.arContentCpt.fnSetCameraFov(camFov);
}
_const trackerOption = {
renderer: wcengine,
onStarted: onStarted,
onRecogSuccess: onRecogSuccess,
__};_
//算法启动,要求先启动内容后再启动算法
const trackerType = this.data.TRACK_TYPE.DOF_3;
this.arSessionCpt.fnStart(trackerType, trackerOption);;
3.3.2 AREzxr 方法使用示例
AREzxr 引用:
javascript
//在page或component的js文件中添加
const plugin = requirePlugin('ezxrARSession')
this.ezxr = new plugin.AREzxr();
AREzxr 提供方法使用:
javascript
//在page或component的js文件中添加
// 从内容平台获取资源
const response = await this.ezxr.fnWxRequestRes(7907, 'development'); // 测试环境
console.log('content response', response);
// 获取设备支持&获取内容配置
const ins = await this.ezxr.checkARSupport();
console.log('ARSupport', ins);
javascript
// 在渲染引擎的js文件Update中添加
// 渲染更新
this.ezxr.PoseUpdate();
const poseStatus = this.ezxr.fnGetGlobalGLPose();
// 如使用非易现Insihgt渲染(如threejs-miniProgram),则获取标准的GLPose;对应web编辑器
this.contentCpt.fnSetCameraPose(poseStatus.pose);
// 如使用易现Inisht渲染,则获取ezxrGLPose。对应unity编辑器
this.contentCpt.fnSetCameraPose(poseStatus.ezxrPose);
javascript
// 拍照
const path = await this.ezxr.fnTakephoto();
console.log(" img.takephoto ", path)